<template>
    <div class="common-left-menu">
        <div class="top-mineinfo">
            <div class="tm-avatar">
                <img class="tm-avatar-img" src="../assets/img/source/avatar.jpg">
            </div>
            <div class="tm-name">爱设计的猪猪</div>
            <div class="tm-authority">
                <span class="tm-a-txt">VIP 特权：</span><span class="tm-a-txt">普通用户</span>
            </div>
        </div>
        <div class="btm-menu">
            <div class="bm-item" v-for="item of list" :key="item.id" :class="{active:item.activeFlag}" @click="jumpTo(item.id,item.path)">
                <div class="bm-i-active-line"></div>
                <div class="bm-i-title">
                    <img class="bm-i-t-icon" :src="item.icon">
                    <span class="bm-i-t-txt">{{item.title}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list:[
                {
                    id:1,
                    title:'会员首页',
                    icon:require('../assets/img/icon/manager.png'),
                    path:'/mine',
                    activeFlag:true
                },
                {
                    id:2,
                    title:'我的订单',
                    icon:require('../assets/img/icon/circle.png'),
                    path:'/mine/ol'
                },
                {
                    id:3,
                    title:'资金流水',
                    icon:require('../assets/img/icon/circle.png'),
                    path:''
                },
                {
                    id:4,
                    title:'在线充值',
                    icon:require('../assets/img/icon/circle.png'),
                    path:'/mine/ro'
                },
                {
                    id:5,
                    title:'我的推广',
                    icon:require('../assets/img/icon/circle.png'),
                    path:''
                },
                {
                    id:6,
                    title:'快速提现',
                    icon:require('../assets/img/icon/circle.png'),
                    path:''
                },
                {
                    id:7,
                    title:'上传资源',
                    icon:require('../assets/img/icon/circle.png'),
                    path:''
                },
                {
                    id:8,
                    title:'我的留言',
                    icon:require('../assets/img/icon/circle.png'),
                    path:''
                },
                {
                    id:9,
                    title:'修改资料',
                    icon:require('../assets/img/icon/circle.png'),
                    path:''
                },
                {
                    id:10,
                    title:'修改密码',
                    icon:require('../assets/img/icon/circle.png'),
                    path:''
                },
                {
                    id:11,
                    title:'安全退出',
                    icon:require('../assets/img/icon/logout.png'),
                    path:'logout'
                },
            ]
        };
    },
    methods:{
        jumpTo(id,path){
            if(path != 'logout'){
                let list = JSON.parse(JSON.stringify(this.list));
                list.map(el=>{
                    el.activeFlag && (el.activeFlag = false);
                    if(el.id == id){
                        el.activeFlag = true;
                    }
                })
                this.list = list;
                path && this.$router.push(path).catch(err=>{
                    // console.log(err)
                })
            }else{
                let r = window.confirm('是否退出？退出需重新登录~')
                if(r){
                    this.$storage.clearAll();
                    this.$router.push('/');
                }
            }
        }
    }
};
</script>

<style lang="less" scoped>
.common-left-menu{
    background:#f8f8f8;
    height:100%;
    .top-mineinfo{
        padding-top:30px;
        padding-bottom:40px;
        .tm-avatar{
            text-align:center;
            margin-bottom:22px;
            .tm-avatar-img{
                width:90px;
                height:90px;
                border-radius: 90px;
            }
        }
        .tm-name{
            margin-bottom:12px;
            text-align:center;
            color:@main-font-color;
        }
        .tm-authority{
            text-align:center;
            .tm-a-txt{
                display:inline-block;
                vertical-align: middle;
                color:#999;
            }
        }
    }
    .btm-menu{
        padding-bottom:200px;
        .bm-item{
            height:40px;
            font-size:0;
            margin-bottom:20px;
            cursor: pointer;
            .bm-i-active-line{
                display:inline-block;
                vertical-align: middle;
                height:100%;
                width:4px;
            }
            .bm-i-title{
                width:calc(100% - 4px);
                display:inline-block;
                vertical-align: middle;
                text-align:center;
                .bm-i-t-icon{
                    display:inline-block;
                    vertical-align: middle;
                    width:18px;
                    height:18px;
                    margin-right:10px;
                }
                .bm-i-t-txt{
                    display:inline-block;
                    vertical-align: middle;
                    color:@main-font-color;
                    font-size:@main-font-size;
                }
            }
        }
        .bm-item.active{
            background:#FFFFFF;
            .bm-i-active-line{
                background:#ff9100;
            }
        }
        .bm-item:last-child{
            margin-bottom:0px;
        }
    }
}
</style>